<template>
  <LoginDialog />
  <div :class="['header-bar', 'header-bar-' + theme, 'anime-header']">
    <!-- 左侧：首页 -->
    <div class="menu">
      <router-link @click="goToHome" class="menu-link" to>
        <div class="logo-container">
          <img
            src="@/assets/icons/bilibili.svg"
            alt="首页图标"
            class="menu-icon"
          />
          <div class="kawaii-mascot"></div>
        </div>
        <span class="menu-text">二次元视频</span>
      </router-link>
    </div>

    <!-- 中间：搜索框 -->
    <div class="search-bar" v-if="!hideSearch">
      <div class="search-panel">
        <form class="nav-search-form" @submit.prevent="searchContents">
          <div class="nav-search-content">
            <input
              class="nav-search-input"
              type="text"
              autocomplete="off"
              maxlength="100"
              placeholder="搜索你喜欢的二次元内容..."
              v-model="searchText"
              @focus="handleSearchFocus"
              @blur="handleSearchBlur"
            />
          </div>
          <div class="nav-search-btn">
            <el-button
              :icon="Search"
              circle
              size="small"
              class="kawaii-search-btn"
              @click="searchContents"
            ></el-button>
          </div>
        </form>

        <!-- 搜索下拉框 -->
        <div class="search-dropdown" v-if="showSearchDropdown">
          <!-- 搜索历史 -->
          <div class="search-history" v-if="searchHistory.length > 0">
            <div class="search-section-header">
              <span>搜索历史</span>
              <span class="clear-history" @click="clearSearchHistory">
                清空
              </span>
            </div>
            <div class="history-items">
              <div
                v-for="(item, index) in searchHistory"
                :key="'history-' + index"
                class="history-item"
              >
                <span class="history-text" @click="useSearchHistory(item)">
                  {{ item }}
                </span>
                <span
                  class="delete-history"
                  @click="removeSearchHistory(index)"
                >
                  <i class="el-icon-close">×</i>
                </span>
              </div>
            </div>
          </div>

          <!-- 热搜榜 -->
          <div class="search-hot">
            <div class="search-section-header">
              <span>热搜</span>
            </div>
            <div class="hot-items">
              <div
                v-for="(item, index) in hotSearchList"
                :key="'hot-' + index"
                class="hot-item"
                @click="useSearchHistory(item.keyword)"
              >
                <span class="hot-rank" :class="{ 'top-rank': index < 3 }">
                  {{ index + 1 }}
                </span>
                <span class="hot-keyword">{{ item.keyword }}</span>
                <span class="hot-tag" v-if="item.tag">{{ item.tag }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 右侧：用户栏 -->
    <div class="user-panel">
      <!-- 用户中心 -->
      <div v-if="userStore.token" class="user-center">
        <div
          class="avatar-container"
          @mouseenter="handleMouseEnter"
          @mouseleave="handleMouseLeave"
        >
          <div class="avatar-wrapper">
            <img
              v-if="userStore.userAvatar == ''"
              src="@/assets/defaultuser.png"
              alt="User Avatar"
              class="user-avatar"
              :class="{ 'avatar-expanded': showUserMenu }"
            />
            <img
              v-else
              :src="userStore.userAvatar"
              alt="User Avatar"
              class="user-avatar"
              :class="{ 'avatar-expanded': showUserMenu }"
            />
            <div class="avatar-decoration"></div>
          </div>

          <!-- 用户下拉菜单 -->
          <div
            class="user-dropdown-menu"
            v-if="showUserMenu"
            @mouseenter="handleMouseEnter"
            @mouseleave="handleMouseLeave"
          >
            <div class="menu-bubble-arrow"></div>
            <div class="user-info-header">
              <div class="user-info-avatar">
                <img
                  v-if="userStore.userAvatar == ''"
                  src="@/assets/defaultuser.png"
                  alt="User Avatar"
                />
                <img v-else :src="userStore.userAvatar" alt="User Avatar" />
              </div>
              <div class="user-info-name">
                {{ userStore.nickname || 'niconiconi' }}
              </div>
            </div>
            <div class="user-info-stats">
              <div class="stat-item">
                <span class="stat-count">0</span>
                <span class="stat-label">关注</span>
              </div>
              <div class="stat-item">
                <span class="stat-count">0</span>
                <span class="stat-label">粉丝</span>
              </div>
              <div class="stat-item">
                <span class="stat-count">10</span>
                <span class="stat-label">硬币</span>
              </div>
            </div>
            <div class="user-menu-links">
              <div class="menu-link-item" @click="urlJump('/space/12345678')">
                <div class="menu-icon profile-icon"></div>
                <span>个人中心</span>
                <i class="arrow-icon"></i>
              </div>
              <div
                class="menu-link-item"
                @click="urlJump('/front/user/videos')"
              >
                <div class="menu-icon videos-icon"></div>
                <span>稿件管理</span>
                <i class="arrow-icon"></i>
              </div>
            </div>
            <div class="user-menu-logout" @click="logout">
              <div class="menu-icon logout-icon"></div>
              <span>退出登录</span>
            </div>
          </div>
        </div>
      </div>

      <div v-else class="user-center">
        <el-button class="login-btn" type="text" @click="openLoginDialog">
          登录
        </el-button>
      </div>

      <!-- 消息 -->
      <div class="nav-item">
        <div
          class="nav-icon message-icon"
          @click="urlJump('/front/user/messages')"
        ></div>
        <span class="nav-text">消息</span>
      </div>

      <!-- 收藏 -->
      <div class="nav-item">
        <div
          class="nav-icon favorite-icon"
          @click="urlJump('/space/:id/favorites')"
        ></div>
        <span class="nav-text">收藏</span>
      </div>

      <!-- 历史 -->
      <div class="nav-item">
        <div
          class="nav-icon history-icon"
          @click="urlJump('/user/history')"
        ></div>
        <span class="nav-text">历史</span>
      </div>

      <!-- 创作中心 -->
      <div class="nav-item">
        <div
          class="nav-icon studio-icon"
          @click="urlJump('/front/create')"
        ></div>
        <span class="nav-text">创作中心</span>
      </div>

      <div class="upload-btn" @click="urlJump('/front/create/upload')">
        <el-button type="primary" size="large" class="kawaii-upload-btn">
          <div class="upload-icon"></div>
          <span>投稿</span>
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, defineComponent } from 'vue'
import { Search } from '@element-plus/icons-vue'
import useUserStore from '@/store/modules/user'
/**
 * 引入路由对象并使用
 */
// @ts-ignore
import LoginDialog from '@/components/LoginDialog.vue'

//滚动时触发方法
onMounted(() => {
  // 从localStorage加载搜索历史
  const savedHistory = localStorage.getItem('searchHistory')
  if (savedHistory) {
    searchHistory.value = JSON.parse(savedHistory)
  }
})
const userStore = useUserStore()
const searchText = ref('')
const showUserMenu = ref(false)
const menuHovered = ref(false)
const showSearchDropdown = ref(false)
const searchHistory = ref<string[]>([])

// 模拟用户额外信息（实际项目中应从API获取）
const userInfo = reactive({
  isVip: false,
  coins: 10,
  bCoins: 0,
  follows: 0,
  fans: 0,
  dynamics: 6,
})

// 热搜榜数据
const hotSearchList = reactive([
  { keyword: '司马南偷税漏罪超900万', tag: '热' },
  { keyword: '曝Faker冠军皮肤选永恩', tag: '新' },
  { keyword: '哪吒2延长上映至4月30日', tag: '热' },
  { keyword: '乐言承认当年与周淑怡恋情', tag: '新' },
  { keyword: '退钱哥 认清现实保持热爱', tag: '' },
  { keyword: '毛利兰 回答我', tag: '热' },
  { keyword: 'F1上海站全攻略', tag: '' },
  { keyword: '新奥特曼来了', tag: '' },
  { keyword: '李艺彤再现总选冠军舞台', tag: '新' },
  { keyword: '中国首次实现上万公里星地量子通信', tag: '' },
])

// 搜索内容
const searchContents = () => {
  if (searchText.value.trim()) {
    // 添加到搜索历史
    addToSearchHistory(searchText.value)
    // 跳转到搜索结果页面，使用新窗口打开
    window.open(
      `/front/search/video?keyword=${encodeURIComponent(searchText.value)}`,
      '_blank',
    )

    // 清空搜索框
    searchText.value = ''
  }
}

// 添加搜索历史
const addToSearchHistory = (keyword: string) => {
  // 如果已存在，先移除旧的
  const index = searchHistory.value.indexOf(keyword)
  if (index !== -1) {
    searchHistory.value.splice(index, 1)
  }

  // 添加到开头
  searchHistory.value.unshift(keyword)

  // 限制历史记录数量
  if (searchHistory.value.length > 10) {
    searchHistory.value = searchHistory.value.slice(0, 10)
  }

  // 保存到localStorage
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
}

// 使用搜索历史
const useSearchHistory = (keyword: string) => {
  searchText.value = keyword
  searchContents()
}

// 删除单条搜索历史
const removeSearchHistory = (index: number) => {
  searchHistory.value.splice(index, 1)
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
}

// 清空所有搜索历史
const clearSearchHistory = () => {
  searchHistory.value = []
  localStorage.setItem('searchHistory', JSON.stringify(searchHistory.value))
}

const urlJump = (url: string) => {
  if (userStore.token == '') {
    //如果用户未登录则打开对话框
    userStore.showDialog = true
    return
  }
  window.open(url, '_blank')
}

//打开登录对话框
const openLoginDialog = () => {
  userStore.showDialog = true
}

// 强制刷新并跳转到首页
const goToHome = () => {
  window.location.href = '/front/home'
}

//下拉后的导航栏
const props = defineProps({
  theme: {
    type: String,
    default: 'light', //light白色，dark黑色
  },
  hideSearch: {
    type: Boolean,
    default: false,
  },
})

const logout = async () => {
  let result = await userStore.userLogout()
  if (result === 'ok') {
    // 使用alert代替ElMessage
    alert('退出登录成功')
    showUserMenu.value = false
  }
}

// 处理搜索框焦点
const handleSearchFocus = () => {
  showSearchDropdown.value = true

  // 为搜索下拉菜单设置正确的位置
  setTimeout(() => {
    const searchInput = document.querySelector('.nav-search-input')
    const searchDropdown = document.querySelector('.search-dropdown')

    if (searchInput && searchDropdown) {
      const rect = searchInput.getBoundingClientRect()
      ;(searchDropdown as HTMLElement).style.left = `${rect.left}px`
    }
  }, 0)
}

// 处理搜索框失焦
const handleSearchBlur = () => {
  // 延迟关闭搜索下拉框以便点击
  setTimeout(() => {
    showSearchDropdown.value = false
  }, 200)
}

// 处理用户头像悬停
const handleMouseEnter = () => {
  showUserMenu.value = true
  menuHovered.value = true

  // 为用户下拉菜单设置正确的位置，确保显示在头像正下方
  setTimeout(() => {
    const avatar = document.querySelector('.avatar-wrapper')
    const userMenu = document.querySelector('.user-dropdown-menu')

    if (avatar && userMenu) {
      const rect = avatar.getBoundingClientRect()
      const menuWidth = (userMenu as HTMLElement).offsetWidth

      // 计算居中对齐位置
      const leftPosition = rect.left + rect.width / 2 - menuWidth / 2

      ;(userMenu as HTMLElement).style.top = `${rect.bottom + 10}px`
      ;(userMenu as HTMLElement).style.left = `${leftPosition}px`
    }
  }, 0)
}

// 处理鼠标离开头像或菜单
const handleMouseLeave = () => {
  // 延迟关闭菜单，确保只有当鼠标同时离开头像和下拉框时才关闭
  menuHovered.value = false
  setTimeout(() => {
    if (!menuHovered.value) {
      showUserMenu.value = false
    }
  }, 300)
}

// 将组件导出为默认导出
</script>

<style scoped lang="scss">
.header-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30px;
  height: 64px;
  position: relative;
  z-index: 1000;
  transition: all 0.3s ease;
  overflow: visible;

  &.anime-header {
    background-image: linear-gradient(
      to right,
      rgba(254, 206, 230, 0.95),
      rgba(255, 241, 250, 0.95),
      rgba(254, 206, 230, 0.95)
    );
    box-shadow: 0 4px 15px rgba(255, 105, 180, 0.2);
    border-bottom: 3px solid rgba(255, 150, 180, 0.5);
    position: relative;
    overflow: visible;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url('https://i.imgur.com/QznC0HL.png');
      background-size: 200px;
      background-repeat: repeat;
      opacity: 0.05;
      z-index: -1;
    }
  }
}

.header-bar-dark {
  background-color: rgba(31, 38, 53, 0.2) !important;
  backdrop-filter: blur(10px);

  &.anime-header {
    background-image: linear-gradient(
      to right,
      rgba(85, 40, 80, 0.85),
      rgba(45, 25, 55, 0.85),
      rgba(85, 40, 80, 0.85)
    );
    border-bottom: 3px solid rgba(180, 100, 160, 0.5);

    &::before {
      opacity: 0.1;
    }
  }

  .nav-text,
  .menu-text {
    color: #fff !important;
    text-shadow: 0 0 5px rgba(255, 182, 193, 0.8);
  }

  .nav-icon {
    filter: brightness(1.5);
  }
}

.menu {
  margin-right: 20px;

  .menu-link {
    display: flex;
    align-items: center;
    text-decoration: none;
    position: relative;

    .logo-container {
      position: relative;
      width: 40px;
      height: 40px;

      .menu-icon {
        width: 40px;
        height: 40px;
        transition: all 0.3s ease;
        filter: drop-shadow(0 0 3px rgba(255, 105, 180, 0.6));
      }

      .kawaii-mascot {
        position: absolute;
        right: -5px;
        bottom: -5px;
        width: 20px;
        height: 20px;
        background-image: url('https://i.imgur.com/z3Ah5GD.png');
        background-size: contain;
        background-repeat: no-repeat;
        transform: rotate(10deg);
        opacity: 0;
        transition: all 0.3s ease;
      }
    }

    &:hover {
      .menu-icon {
        transform: rotate(5deg) scale(1.1);
      }

      .kawaii-mascot {
        opacity: 1;
        transform: rotate(-10deg) translateY(-5px);
      }

      .menu-text {
        transform: translateY(-2px);
      }

      &::after {
        width: 100%;
      }
    }

    .menu-text {
      font-size: 20px;
      font-weight: bold;
      color: #fe4ea4;
      margin-left: 10px;
      transition: all 0.3s ease;
      letter-spacing: 1px;
      text-shadow: 0 0 5px rgba(255, 105, 180, 0.3);
    }

    &::after {
      content: '';
      position: absolute;
      bottom: -5px;
      left: 0;
      width: 0;
      height: 3px;
      background-image: linear-gradient(to right, #fe4ea4, #ff85c2);
      transition: all 0.3s ease;
      border-radius: 3px;
    }
  }
}

.search-bar {
  flex: 1;
  display: flex;
  justify-content: center;
  max-width: 500px;
  position: relative;
  overflow: visible;

  .search-panel {
    width: 100%;
    position: relative;
    overflow: visible;

    .nav-search-form {
      display: flex;
      border: 2px solid #fe4ea4;
      border-radius: 25px;
      overflow: hidden;
      background-color: rgba(255, 255, 255, 0.9);
      box-shadow: 0 0 10px rgba(255, 105, 180, 0.2);
      transition: all 0.3s ease;
      height: 40px;

      &:focus-within {
        box-shadow: 0 0 15px rgba(255, 105, 180, 0.4);
        transform: translateY(-3px);
      }
    }

    .nav-search-content {
      flex: 1;

      .nav-search-input {
        width: 100%;
        height: 40px;
        border: none;
        outline: none;
        padding: 0 20px;
        background: transparent;
        font-size: 15px;
        color: #fe4ea4;

        &::placeholder {
          color: #ffb6c1;
          opacity: 0.7;
        }
      }
    }

    .nav-search-btn {
      display: flex;
      align-items: center;
      padding-right: 5px;

      .kawaii-search-btn {
        background-color: #fe4ea4;
        border-color: #fe4ea4;
        color: white;
        transition: all 0.3s ease;
        width: 32px;
        height: 32px;
        margin-right: 3px;

        &:hover {
          background-color: #ff85c2;
          transform: scale(1.05);
          box-shadow: 0 0 8px rgba(255, 105, 180, 0.6);
        }
      }
    }

    .search-dropdown {
      position: fixed !important;
      top: 65px !important;
      left: auto !important;
      width: 450px !important;
      background-color: #fff;
      border: 2px solid #ffb6c1;
      border-radius: 12px;
      box-shadow: 0 8px 20px rgba(255, 105, 180, 0.3);
      z-index: 10000 !important;
      max-height: 400px;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 15px;

      .search-section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 5px;
        font-weight: bold;
        color: #fe4ea4;
        border-bottom: 1px solid rgba(255, 182, 193, 0.3);
        margin-bottom: 12px;

        span {
          font-size: 16px;
        }

        .clear-history {
          color: #ff85c2;
          font-size: 12px;
          transition: all 0.2s ease;
          padding: 3px 8px;
          border-radius: 10px;
          cursor: pointer;

          &:hover {
            background-color: rgba(255, 182, 193, 0.2);
            color: #fe4ea4;
          }
        }
      }

      .history-items {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 5px;
        margin-bottom: 15px;

        .history-item {
          display: inline-flex;
          align-items: center;
          background-color: #ffecf5;
          border-radius: 15px;
          padding: 5px 12px;
          transition: all 0.3s ease;
          cursor: pointer;
          border: 1px solid rgba(255, 182, 193, 0.3);

          &:hover {
            background-color: #ffd6e6;
            transform: translateY(-2px);
            box-shadow: 0 3px 8px rgba(254, 78, 164, 0.15);
          }

          .history-text {
            font-size: 13px;
            color: #fe4ea4;
          }

          .delete-history {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-left: 6px;
            width: 16px;
            height: 16px;
            border-radius: 50%;
            transition: all 0.2s ease;
            background-color: rgba(255, 182, 193, 0.1);

            &:hover {
              background-color: rgba(255, 105, 180, 0.2);
            }

            i {
              font-size: 12px;
              color: #fe4ea4;
            }
          }
        }
      }

      .hot-items {
        padding: 0;

        .hot-item {
          padding: 10px 12px;
          transition: all 0.2s ease;
          display: flex;
          align-items: center;
          border-radius: 8px;
          cursor: pointer;

          &:hover {
            background-color: rgba(255, 228, 240, 0.6);
          }

          .hot-rank {
            display: inline-block;
            width: 22px;
            height: 22px;
            text-align: center;
            line-height: 22px;
            border-radius: 4px;
            margin-right: 12px;
            font-weight: bold;
            font-size: 12px;
            background-color: #ffcee8;
            color: #fe4ea4;

            &.top-rank {
              background-color: #fe4ea4;
              color: white;
            }
          }

          .hot-keyword {
            flex: 1;
            font-size: 14px;
            color: #666;
          }

          .hot-tag {
            font-size: 11px;
            padding: 2px 6px;
            border-radius: 10px;
            margin-left: 8px;
            font-weight: bold;
            background-color: #ffcee8;
            color: #fe4ea4;
          }
        }
      }
    }
  }
}

.user-panel {
  display: flex;
  align-items: center;
  overflow: visible;

  .user-center {
    margin-right: 10px;
    position: relative;
    overflow: visible;

    .avatar-container {
      position: relative;
      cursor: pointer;
      overflow: visible;

      .avatar-wrapper {
        position: relative;
        width: 40px;
        height: 40px;
        border-radius: 50%;
        overflow: hidden;
        border: 2px solid #ffb6c1;
        box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
        transition: all 0.3s ease;

        .user-avatar {
          width: 100%;
          height: 100%;
          object-fit: cover;
          transition: all 0.3s ease;

          &.avatar-expanded {
            transform: scale(1.1);
          }
        }

        .avatar-decoration {
          position: absolute;
          top: -15px;
          right: -15px;
          width: 30px;
          height: 30px;
          background-image: url('https://i.imgur.com/C2AQRXJ.png');
          background-size: contain;
          background-repeat: no-repeat;
          opacity: 0;
          transform: rotate(45deg);
          transition: all 0.3s ease;
        }

        &:hover {
          box-shadow: 0 0 15px rgba(255, 105, 180, 0.5);

          .avatar-decoration {
            opacity: 1;
            transform: rotate(15deg);
          }
        }
      }

      .user-dropdown-menu {
        position: fixed !important;
        top: 70px !important;
        right: auto !important;
        width: 260px;
        border: 2px solid #ffb6c1;
        border-radius: 12px;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 10px 25px rgba(255, 105, 180, 0.4);
        z-index: 10000 !important;
        overflow: hidden;
        max-height: 500px;
        overflow-y: auto;

        &::before {
          content: '';
          position: absolute;
          top: -10px;
          left: 50%;
          transform: translateX(-50%);
          border-left: 10px solid transparent;
          border-right: 10px solid transparent;
          border-bottom: 10px solid #ffb6c1;
        }

        .user-info-header {
          padding: 15px;
          background-color: rgba(255, 227, 238, 0.5);
          display: flex;
          align-items: center;

          .user-info-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            overflow: hidden;
            border: 2px solid white;
            box-shadow: 0 0 10px rgba(255, 105, 180, 0.3);
            margin-right: 10px;

            img {
              width: 100%;
              height: 100%;
              object-fit: cover;
            }
          }

          .user-info-name {
            font-weight: bold;
            color: #fe4ea4;
            font-size: 16px;
          }
        }

        .user-info-stats {
          display: flex;
          padding: 10px 0;
          border-bottom: 1px solid rgba(255, 182, 193, 0.3);

          .stat-item {
            flex: 1;
            text-align: center;

            .stat-count {
              display: block;
              font-weight: bold;
              color: #fe4ea4;
            }

            .stat-label {
              font-size: 12px;
              color: #999;
            }
          }
        }

        .user-menu-links {
          border-bottom: 1px solid rgba(255, 182, 193, 0.3);

          .menu-link-item {
            padding: 12px 15px;
            display: flex;
            align-items: center;
            transition: all 0.2s ease;
            cursor: pointer;

            &:hover {
              background-color: rgba(255, 228, 240, 0.6);
            }

            .menu-icon {
              width: 20px;
              height: 20px;
              margin-right: 10px;
              background-size: contain;
              background-repeat: no-repeat;
              background-position: center;
            }

            .profile-icon {
              background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,4A4,4 0 0,1 16,8A4,4 0 0,1 12,12A4,4 0 0,1 8,8A4,4 0 0,1 12,4M12,14C16.42,14 20,15.79 20,18V20H4V18C4,15.79 7.58,14 12,14Z" fill="%23fe4ea4"/></svg>');
            }

            .videos-icon {
              background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M4,6H2V20A2,2 0 0,0 6,22H20V20H6V6M20,2H8A2,2 0 0,0 6,4V16A2,2 0 0,0 8,18H20A2,2 0 0,0 22,16V4A2,2 0 0,0 20,2M12,14.5V5.5L18,10L12,14.5Z" fill="%23fe4ea4"/></svg>');
            }

            span {
              flex: 1;
              color: #666;
            }

            .arrow-icon {
              width: 16px;
              height: 16px;
              background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z" fill="%23fe4ea4" fill-opacity="0.5"/></svg>') !important;
            }
          }
        }

        .user-menu-logout {
          padding: 12px 15px;
          display: flex;
          align-items: center;
          transition: all 0.2s ease;
          cursor: pointer;

          &:hover {
            background-color: rgba(255, 228, 240, 0.6);
          }

          .menu-icon {
            width: 20px;
            height: 20px;
            margin-right: 10px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
          }

          .logout-icon {
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M16,17V14H9V10H16V7L21,12L16,17M14,2A2,2 0 0,1 16,4V6H14V4H5V20H14V18H16V20A2,2 0 0,1 14,22H5A2,2 0 0,1 3,20V4A2,2 0 0,1 5,2H14Z" fill="%23fe4ea4"/></svg>');
          }

          span {
            color: #666;
          }
        }
      }
    }

    .login-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 80px;
      height: 40px;
      background-color: #fe4ea4;
      color: white;
      border-radius: 20px;
      font-weight: bold;
      font-size: 16px;
      transition: all 0.3s ease;
      border: none;
      box-shadow: 0 4px 10px rgba(255, 105, 180, 0.3);

      &:hover {
        background-color: #ff85c2;
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(255, 105, 180, 0.4);
      }
    }
  }

  .nav-item {
    margin: 0 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      transform: translateY(-3px);

      .nav-icon {
        transform: scale(1.1);
      }

      .nav-text {
        color: #fe4ea4 !important;
      }
    }

    .nav-icon {
      width: 24px;
      height: 24px;
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
      margin-bottom: 4px;
      transition: all 0.3s ease;
    }

    .message-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M20,2H4C2.9,2 2,2.9 2,4V22L6,18H20C21.1,18 22,17.1 22,16V4C22,2.9 21.1,2 20,2M20,16H5.2L4,17.2V4H20V16Z" fill="%23fe4ea4"/></svg>');
    }

    .favorite-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.46,13.97L5.82,21L12,17.27Z" fill="%23fe4ea4"/></svg>');
    }

    .history-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M13.5,8H12V13L16.28,15.54L17,14.33L13.5,12.25V8M13,3A9,9 0 0,0 4,12H1L4.96,16.03L9,12H6A7,7 0 0,1 13,5A7,7 0 0,1 20,12A7,7 0 0,1 13,19C11.07,19 9.32,18.21 8.06,16.94L6.64,18.36C8.27,20 10.5,21 13,21A9,9 0 0,0 22,12A9,9 0 0,0 13,3" fill="%23fe4ea4"/></svg>');
    }

    .studio-icon {
      background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M17,10.5V7A1,1 0 0,0 16,6H4A1,1 0 0,0 3,7V17A1,1 0 0,0 4,18H16A1,1 0 0,0 17,17V13.5L21,17.5V6.5L17,10.5Z" fill="%23fe4ea4"/></svg>');
    }

    .nav-text {
      font-size: 12px;
      color: #666;
      transition: all 0.3s ease;
    }
  }

  .upload-btn {
    margin-left: 15px;

    .kawaii-upload-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 40px;
      background-color: #fe4ea4;
      border-color: #fe4ea4;
      transition: all 0.3s ease;
      border-radius: 20px;
      padding: 0 20px;
      font-weight: bold;
      box-shadow: 0 4px 10px rgba(255, 105, 180, 0.3);

      &:hover {
        background-color: #ff85c2;
        border-color: #ff85c2;
        transform: translateY(-3px);
        box-shadow: 0 6px 15px rgba(255, 105, 180, 0.4);
      }

      .upload-icon {
        width: 20px;
        height: 20px;
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z" fill="%23FFFFFF"/></svg>') !important;
        margin-right: 6px;
      }

      span {
        font-size: 14px;
      }
    }
  }
}

/* 新增全局样式，确保下拉菜单能够正确显示 */
:global(body) {
  overflow-x: hidden;
}
</style>
